<template>
	<view class="page-body ">
		<view class="paround40">
			<view class="p-t">为保证转账额度不受限制，请您先添加收款企业为支付宝好友。转账时请备注您的每益汇账户，格式如下：手机号+姓名</view>
			<view class="h4 flex">
				<view class="t">添加企业支付宝账户</view>
				<view class="button" @click="changeAccount" v-if="zfbArr.length>1">下一个账户</view>
			</view>
			<view class="cont">
				<view class="h3 paround40">支付宝账户 {{nowaccount.account}} </view>
				<image class="img" :src="nowaccount.qr_code_path" mode="" @longtap="savePic"></image>
				<view class="p">打开支付宝扫码加收款账户好友</view>
				<view class="word flex">
					<view class="l">{{nowaccount.password}}</view>
					<view class="r"  @click.stop="setClipboardData">复制吱口令</view>
				</view>
				<view class="bottom">{{nowaccount.company}}</view>
			</view>
			<view class="tip flex">
				<text>注：</text>
				<text>点击复制吱口令，打开支付搜索，粘贴，也可添加企业支付宝账户为好友</text>
			</view>
			<view class="button  fixed"  @click="nextStep">我已支付，查看订单状态</view>
		</view>
		<neilModal content="您是否已经添加支付宝好友并转账" title="温馨提示" align="center" ref="neilmodal"  @confirm="nextStep" @cancel="closeModal"></neilModal>
	</view>
	
</template>

<script>
	var that;
	import {isPoneAvailable,TimeStorage,showModal,trim} from '@/utils/utils.js';
	import {httpReq} from '@/utils/request.js';
	import {
	    mapState,
	    mapMutations
	} from 'vuex';
	import neilModal from '@/components/neil-modal.vue';
	export default{
		data(){
			return{
				sum:"",
				zfbArr:[],
				nowaccount:"",
				currentid:0,
			}
		},
		computed:mapState({
			
		}),
		onLoad(options){
			that=this;
			if(options.sum){
				this.sum = options.sum
			}
			this.getzfbArr()
		},
		methods:{
			getzfbArr(){
				this.$https.POST({
					url:'/pay/alipayAccountList',
					data:{},
					success(res){
						that.zfbArr = res.data;
						that.nowaccount = that.zfbArr[that.currentid]
					}
				})
			},
			changeAccount(){
				let length = this.zfbArr.length;
				this.currentid++;
				if(this.currentid==length){
					this.currentid = 0;
				}
				this.nowaccount = this.zfbArr[this.currentid];
			},
			setClipboardData(){ //复制账号
				let word = this.nowaccount.password;
				uni.setClipboardData({
				    data: word,
				    success: function () {
				        that.$showToast('复制成功')
				    }
				});
			},
			showModal(){
				this.$refs.neilmodal.showModal()
			},
			closeModal(){
			},
			nextStep(){
				let accountid = this.zfbArr[this.currentid].id;
				uni.navigateTo({
					url:"/pages/user/recharge/zfb?sum="+this.sum+"&accountid="+accountid
				})
			},
			savePic(){
				let url=this.$imgurl + this.nowaccount.qr_code_path;
				uni.showActionSheet({
					itemList:['保存图片'],
					success:(res)=>{
						if(res.tapIndex==0){
							uni.getImageInfo({
								src: url,
								success: function (image) {
									uni.saveImageToPhotosAlbum({
										filePath: image.path,
										success: function() {
											uni.showToast({
												title: '图片保存成功',
												icon: 'none',
												duration: 1000
											});
										}
									});
								}
							});
						}
					}
				})
			}
		},
		onShow(options){
		
		},
		components:{
			neilModal
		},
		onNavigationBarButtonTap() {
			let accountid = this.zfbArr[this.currentid].id
			uni.navigateTo({
				url:"/pages/user/recharge/zfb?sum="+this.sum+"&accountid="+accountid
			})
		}
	}
</script>

<style lang="scss" scoped="">
	@import '../../../static/css/user.css';
	.page-body{padding-bottom: 200upx;}
	.h4{
		justify-content: space-between;height: 96upx;
		// margin-top:16upx ;
		.t{font-size: 32upx;color: #111A34;}
		.button{border:1px solid #3095F2;color: #3095F2;height: 56upx;width: 170upx;line-height: 54upx;border-radius: 28upx;font-size: 28upx;margin-top: 0;}
	}
	 .p-t{
		 color: #5E626E;line-height: 44upx;
		 background: #F2F2F6;border-radius: 10upx;padding: 20upx;
	 }
	 .step{width: 108upx;height: 54upx;background: #0D96E9;position: relative;line-height: 54upx;text-align: center;border-radius: 10upx;color: #fff;margin-top: 44upx;}
	 .step:after{
		content: "";
		display: block;
		position:absolute;
		left: 30upx;
		bottom: -28upx;
		height: 0;
		border:16upx solid transparent;
		border-top-color: #0D96E9;
	 }
	.cont{
		background: linear-gradient(55deg,rgba(0,151,230,1),rgba(62,149,246,1));padding-top:30upx;border-radius: 10upx;color: #fff;overflow: hidden;
		.h3{font-size: 38upx;}
		.img{
			width:260upx;height: 260upx;display: block;margin:40upx auto 0;
		}
		.p{text-align: center;color: #fff;font-size: 28upx;padding-top: 14upx;}
		.big{font-size: 50upx;font-weight: bold;text-align: center;padding: 20upx 0;}
		.word{
			justify-content: space-between;padding:32upx 40upx 36upx;
			.l{width: 300upx;font-size: 38upx;}
			.r{padding: 10upx 16upx; border:1px solid #F2F2F6;border-radius: 30upx;color: #fff;font-size: 28upx;}
		}
		.bottom{height: 70upx;line-height: 70upx;font-size: 28upx;background: #188ADE;padding: 0 40upx;}
	}
	.tip{color: #A9B0C0;align-items: flex-start;margin-top: 20upx;}
	.button{margin-top: 40upx;border-radius: 44upx;width: 670upx;bottom: 30upx;left: 40upx;top: auto;}
	// .button{position: fixed;bottom: 40upx;width: 670upx;left: 40upx;}
</style>
